<template>
  <div class="searchlist">
    <a @click="toDetail(goods.id)" v-for="goods in goodsList" :key="goods.id">
      <img class="searchimg" v-lazy="goods.defaultImg" alt="" />
      <!-- 返回数据有标签所以用v-html渲染 -->
      <p v-html="goods.title"></p>
      <i>{{ goods.price }}<i class="deletetext"></i></i>
      <img class="searchimg2" src="" alt="" />
      <div>
        <img src="" alt="" />
        <img src="" alt="" />
      </div>
    </a>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "SearchList",
  computed: {
    ...mapGetters("search", ["goodsList"]),
  },
  methods: {
    // 跳转至详情页面
    toDetail(id) {
      this.$router.push({
        name: "detail",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.searchlist {
  width: 1226px;
  margin: 20px auto;
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-between;
  overflow: hidden;
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 296px;
    height: 430px;
    background-color: #fff;
    padding-top: 47px;
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom: 14px;
    float: left;
    .searchimg {
      width: 200px;
      height: 200px;
    }
    .searchimg2 {
      width: 34px;
      height: 34px;
      margin: 20px 0;
    }
    p {
      font-size: 14px;
      width: 160px;
      color: #666;
      margin-top: 25px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    i {
      margin-top: 3px;
      color: #ff6700;
      font-size: 14px;
    }
    & > div {
      img {
        margin-left: 5px;
      }
    }
    &:hover {
      box-shadow: 8px 8px 12px #ccc;
    }
    &:hover p {
      color: #ff6700;
    }
    // &:last-child {
    //   margin-left: 14px;
    //   margin-right: auto;
    // }
  }
}
</style>